<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .ball {
            width: 40px;
            height: 40px;
            border-radius: 20px;
        }

        .ball1 {
            background-color: red;
        }

        .ball2 {
            background-color: yellow;
        }

        .ball3 {
            background-color: green;
        }
    </style>
</head>
<body>
<div class="ball ball1" style="margin-left:1px;"></div>
<div class="ball ball2" style="margin-left:0px;"></div>
<div class="ball ball3" style="margin-left:0px;"></div>
</body>
<script>
    var ball1 = document.querySelector('.ball1');
    var ball2 = document.querySelector('.ball2');
    var ball3 = document.querySelector('.ball3');

    function anim(ball, dist, cb) {
        setTimeout(function() {
            var marginLeft = parseInt(ball.style.marginLeft, 10);
            
            if (marginLeft === dist) {
                cb && cb()
            } else {
                if (marginLeft < dist) {
                    marginLeft++;
                } else {
                    marginLeft--;
                }
                console.log(marginLeft);
                ball.style.marginLeft = marginLeft+'px';
                anim(ball, dist, cb);
            }

        }, 13);
    }

    anim(ball1, 100, function() {
        anim(ball2, 200, function() {
            anim(ball3, 300, function() {
                anim(ball3, 150, function() {
                    anim(ball2, 150, function() {
                        anim(ball1, 150, function() {

                        })
                    })
                })
            })
        })
    })
</script>
</html>